<template>
	<view class="order-detail">
		<view class="order-detail-top">
			<view class="order-detail-top-l">
				<text>订单编号: {{orderID}}</text>
				<text>创建时间: {{cTime}}</text>
			</view>
			<view class="order-detail-top-r">
				<view class="btn-cpoy">复制</view>
			</view>
		</view>
		<view class="order-address" @tap="toAddressManage">
			<view class="order-address-t">
				<text>收货人: {{address.receiver}}</text>
				<text class="address-phone">{{address.phone}}</text>
			</view>
			<view class="order-address-b">
				<text>收货地址: {{address.address}}</text>
			</view>
			<view class="uni-icon uni-icon-arrowright icon-right"></view>
		</view>

		<view class="order-detail-shop">
			<commodity-item :shopItem="shopItem" ></commodity-item>
			<view class="order-detail-shop-bottom">
				<text class="">共1件商品</text>
				<text class="price_color">小计: ¥{{shopItem.price}}</text>
			</view>
		</view>
		<view class="order-detail-shipping-method">
			<text>配送方式:</text>
			<text>{{shippingMethod}}</text>
		</view>
		<view class="order-detail-leaving-message">
			<view class="order-detail-leaving-message-body">
				<text>买家留言</text>
				<input type="text" value="" placeholder="建议留言前先于客户沟通确认" />
			</view>
		</view>
		
		<view class="">
			<view class="order-detail-shipping-method" style="padding-bottom: 0upx;">
				<text>商品金额</text>
				<text>¥{{shopItem.price}}</text>
			</view>
			<view class="order-detail-shipping-method" style="padding-top: 0upx;">
				<text>运费</text>
				<text>0</text>
			</view>
		</view>
		<view class="order_price_color order-detail-sum-price" >
			<text >合计: ¥{{shopItem.price}}</text>
		</view>
		
		
		<view class="footer">
			<view class="footer-left">
				订单状态: 待支付
			</view>
			<view class="footer-right">
				<view class="footer-right-l grep-btn" >
					<text>联系客服</text>
				</view>
				<view class="footer-right-r red-btn" @tap="toOrderConfirm" >
					<text>去支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import commodityItem from 'components/commodity-item.vue'
	
	export default {
		components: {
			commodityItem
		},
		data() {
			return {
				orderID: "E201810239489334",
				cTime: "2018-12-11 18:00:48",
				address: {
					receiver: "张小三",
					phone: "13800138000",
					address: "山东省淄博市张店区阳光国际A座601"
				},
				shopItem: {
					imgURL: "/static/img/index1/u131.jpg",
					title: "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
					price: 288.00,
					piece: 1
				},
				sumPrice: 288.00,
				shippingMethod: "到付",
				freight: 0,
			}
		},
		methods:{
			toOrderConfirm(){
				uni.navigateTo({
					url:"/pages/order/order-confirm"
				})
			},
			toAddressManage(){
				uni.navigateTo({
					url:"/pages/own/address-manage"
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-detail {
		width: 100%;
		box-sizing: border-box;
		color: #666666;


		.order-detail-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// border: 1px solid red;
			padding: 20upx;
			align-items: center;
			font-size: 14px;

			border-bottom: 1px solid #f3f3f3;
		}

		.order-detail-top-l {
			// flex:2;
			display: flex;
			flex-direction: column;
		}

		.order-detail-top-r {
			// flex:1
		}

		.btn-cpoy {
			display: flex;
			align-items: center;
			justify-content: space-around;

			border: 1px solid rgba(242, 242, 242, 1);
			width: 63px;
			height: 31px;
			text-align: center;
			border-radius: 2px;
			margin-right: 20upx;
			font-size: 13px;
		}

		.order-address {
			padding: 20upx;
			position: relative;
			font-size: 14px;
			border-bottom: 1px solid rgba(242, 242, 242, 1) ;

// 			border-bottom: 1px dotted;
// 			border-image: linear-gradient(to right, gray, orange) 1 1 round;

			.icon-right {
				position: absolute;
				top: 43%;
				right: 2%;
				font-size: 18px;
			}

			.address-phone {
				padding-right: 40upx;
				font-weight: bold;
				font-size: 14px;
			}
		}

		.order-address-t {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.order-detail-shop {
			padding-top: 50upx;
			display: flex;
			flex-direction: column;
		}


		
		.order-detail-shop-bottom {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 20upx;
			padding-right: 20upx;
			text {
				padding-left: 20upx;
			}
		}

		.order-detail-shipping-method{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: rgba(242, 242, 242, 1);
			padding: 20upx;
		}
		
		
		.order-detail-leaving-message {
			margin: 20upx auto;
		}
		
		.order-detail-leaving-message-body {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			background-color: rgba(242, 242, 242, 1);
			margin: 20upx auto;
			padding: 10upx 0upx ;
			font-size: 14px;
		
			text {
				width: 20%;
				text-align: center;
			}
			
			input{
				font-size: 13px;
				padding-left: 5upx;
				width: 70%;
				background-color: #fff;
			}
		}
		
		.order-detail-sum-price{
			width: 100%; 
			display: flex; 
			flex-direction: row; 
			justify-content: flex-end; 
			padding-right: 20upx;
			
			box-sizing: border-box;
			
			// border: 1px solid red;
		}
		
		
		////
		//--footer
		.footer {
			position: fixed;
			z-index: 2;
			bottom: 0%;
			box-shadow: 0px -2px 5px rgba(94, 94, 94, 0.3);
			background-color: white;
			width: 100%;
			box-sizing: border-box;
		
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 100upx;
		}
		
		.footer-left {
			color: #666666;
			width: 35%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			// border: 1px solid black;
		}
		
		.footer-left view {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			border-left: 1px solid #e2e2e2;
			width: 100%;
			padding: 10upx 10upx;
		}
		
		.footer-left text {
			padding-top: 2upx;
			font-size: 13px;
		}
		
		.footer-left image {
			width: 35upx;
		}
		
		.footer-right {
			color: #FFFFFF;
			width: 65%;
			display: flex;
			flex-direction: row;
		}
		
		.footer-right-l {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: Center;
		}
		
		.footer-right-r {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.grep-btn {
			background-color: rgba(94, 94, 94, 1);
		}
		
		.red-btn {
			background-color: rgba(242, 68, 57, 1);
		}
	}
</style>
